<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addInfoPage</title>
<script src="/js/jquery.min.js"></script>
<style>
	[type=text] {
		width:850px;
	}
	
	[type=button] {
		width:150px;
	}
</style>
</head>
<body>
	<div id='addAndSearch' class="jumpPageDest" hidden='true'>
		<form action="/search/addAndSearch" method="post">
			<textarea rows="30" cols="130" autofocus name="info"></textarea>
			<br/>
			<input type="text" name="cond" width='200px' value=""/>
			<br/>
			<div>
				<input type="button" name="submit" value="提交"/>
				<input type="button" name="jumpPage" jumpPage="search" value="查询界面"/>
				<input type="button" name="jumpPage" jumpPage="addFileAndSearch" value="文件查询界面"/>
			</div>
		</form>
	</div>
	<div id='addFileAndSearch' class="jumpPageDest">
		<form action="/search/addFileAndSearch" method="post">
			<input type="text" name="lines" id="lines" width='200px' value="100"/>
			<br/>
			<input type="text" name="cond" width='200px' value=""/>
			<br/>
			<div>
				<input type="button" name="submit" value="提交"/>
				<input type="button" name="jumpPage" jumpPage="search" value="查询界面"/>
				<input type="button" name="jumpPage" jumpPage="addAndSearch" value="增加并查询界面"/>
			</div>
		</form>
	</div>
	<div id='search' hidden='true' class="jumpPageDest">
		<form action="/search" method="post">
			<input type="text" name="cond" width='200px' placeholder="查询条件"/>
			<br/>
			<div>
				<input type="button" name="submit" value="提交"/>
				<input type="button" name="jumpPage" jumpPage="addAndSearch" value="增加并查询界面"/>
			</div>
		</form>
	</div>
	<div id="search_result"></div>
<script>
	$(function(){
		$.ajax({
			url: window.location.origin+'/search/getCondition',
			async:true,
			type:"POST",
			success:function(info){
				$("input[name='cond']").val(info);
			},
			error:function(xhr,msg,excp){
				console.log(xhr,msg,excp);
				alert("Error!");
			}
		});
	});

	$("input[name='jumpPage']").click(function(){
		// 按jumpPage属性，匹配展示的div
		// 选择器内this为dom对象；$(this)切换为jquery对象
		var jumpPage = this.getAttribute('jumpPage');
		if(jumpPage){
			$("div.jumpPageDest").each((idx, ele) => {
				// each遍历方法内，ele为dom对象
				if(ele.id==jumpPage){//
					$(ele).show();
				}else{
					$(ele).hide();
				}
			})
		}
	});

	$("input[name='submit']").click(function(){
		var form = $(this).parents("form");
		var urlSuffix = form.attr("action");
		// form表单内输入，转为json对象
		let args={};
		form.children()
				.filter("input,textarea")
				.each((idx, ele)=>{
					// each遍历方法内，ele为dom对象
					args[ele.name] = ele.value;
				});
		//清空之前的数据
		$("#search_result").html("");
		//ajax查询
		$.ajax({
			url: window.location.origin+urlSuffix,
			async:true,
			//dataType:"json",//返回数据类型
			type:"POST",
			// username:"a",//basic验证
			// password:"b",
			data: args,
			success:function(info){
				let html = info2Html(info);
				//console.log(html);
				$("#search_result").html(html);
			},
			error:function(xhr,msg,excp){
				console.log(xhr,msg,excp);
				alert("Error!");
			}
		});
	});

	function info2Html(info){
		let objs = JSON.parse(info);
		if(!objs.length){
			alert("No Data!");
		}
		let content = objs.map(function(val, index, arr){
			return `<tr>
						<td>${val.date}</td>
						<td>${val.info}</td>
					</tr>`;
		}).join();
		return `<table border="1">${content}</table>`;
	}

</script>
</body>
</html>